<template>
  <span class="wrapper">
    <div class="ec-item-div" v-if="getTag === 'CUSTOMER_GOOD'">
      <el-row>
            <div :data-id="body.id" class="row-item">
              <div class="row-item-good">
                <img :src="body.thumbnailUrl"  alt=""/>
                <p>{{body.title}}</p>
              </div>
              <div class="row-item-price">
                <span>金额: {{body.price}}元</span><el-button class="web__msg-submit" type="primary" size="mini" @click="sendGood">发送</el-button>
              </div>
            </div>
      </el-row>
    </div>
    <div class="ec-item-div" v-if="getTag === 'CUSTOMER_ORDER'">
      <el-row>
            <div :data-id="body.id" class="row-item">
              <div>
                <span>订单号: {{body.code}}</span>
              </div>
              <div class="row-item-good">
                <img :src="body.thumbnailUrl"  alt=""/>
                <p>{{body.title}}</p>
              </div>
              <div class="row-item-price">
                <span>金额: {{body.price}}元</span><el-button class="web__msg-submit" type="primary" size="mini" @click="sendOrder">发送</el-button>
              </div>
            </div>
      </el-row>
    </div>
    <div v-if="getTag === 'LOCAL_CARD'">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>常见问题</span>
        </div>
        <div class="text item" v-for="(item,index) in this.body.body">
          {{item.name}}
        </div>
        <div @click="sendBrowsingGood" class="text item">
          {{'发送浏览中的商品'}}
        </div>
        <div @click="sendCurrentOrder" class="text item">
          {{'发送当前的订单'}}
        </div>
        <div @click="requestManualService" class="text item">
          {{'人工服务'}}
        </div>
      </el-card>
    </div>
    <span class="web__msg--audio" v-if="getTag === 'TEXT'" v-html="parseText()" />
    <div v-if="getTag === 'IMAGE'">
      <img
              class="web__msg--img"
              v-if="getTag === 'IMAGE'"
              :src="getTextAudioVideoData.src"
              alt
              @click="showDialog({tag:'IMAGE'})"
      />
    </div>
    <div v-if="getTag === 'VIDEO'">
      <video
              class="web__msg--video"
              :src="getTextAudioVideoData.src"
              controls="controls"
              @click="showDialog({tag:'VIDEO'})"
      />
      <div v-if="showProcess" class="web__msg--video process-container">
        <div class="process-bar" :style="'width:' + uploadProcess + '%'"></div>
      </div>
    </div>

    <div v-if="getTag === 'FILE'">
      <div class="web__msg--file row-file" @click="showDialog({tag:'FILE'})">
        <div class="row-file-suffix">{{getFileSuffix}}</div>
      </div>
      <div class="row-file-desc"><p>文件:{{msg.body.name}}</p></div>
      <div v-if="showProcess" class="web__msg--video process-container">
        <div class="process-bar" :style="'width:' + uploadProcess + '%'"></div>
      </div>
    </div>

    <audio
            class="web__msg--audio"
            v-if="getTag === 'AUDIO'"
            style="width:20rem;height:20px;"
            :src="getTextAudioVideoData.src"
            controls="controls"
    />

    <el-dialog
            :visible.sync="show"
            width="40%"
            append-to-body
            :before-close="handleClose"
            class="web__dialog"
    >
      <img :src="imgSrc" v-if="imgSrc" style="width:100%;object-fit: cover;" />
      <video
              :src="videoSrc"
              v-if="videoSrc"
              style="width:100%;object-fit: cover;"
              controls="controls"
      ></video>
      <audio
              :src="audioSrc"
              v-if="audioSrc"
              style="width:100%;object-fit: cover;"
              controls="controls"
      ></audio>
    </el-dialog>
  </span>
</template>

<script>
  // import emojiParser from 'wechat-emoji-parser'
  import {emojiParser} from '@/utils/emoji-parser'

  function isElectronPlatform() {
    return navigator.userAgent.toLocaleLowerCase().indexOf('electron') >= 0;
  }

  function downloadFile(url, filename){
    var a = document.createElement('a');    // 创建一个a节点插入的document
    var event = new MouseEvent('click');    // 模拟鼠标click点击事件
    a.download = filename;                  // 设置a节点的download属性值
    a.href = url;                           // 将图片的src赋值给a节点的href
    a.dispatchEvent(event)                  // 触发鼠标点击事件
  }

  export default {
    props: {
      body: Object,
      msg: Object,
      type: String, // 消息类型
    },
    data () {
      return {
        tags: ['img', 'video', 'audio'],
        /* 查看文件详情 */
        show: false,
        imgSrc: '',
        videoSrc: '',
        audioSrc: '',
        fileId:'',
        filePercent:0,
      }
    },
    computed: {
      showProcess () {
        return this.body.localExtra !== undefined && this.body.localExtra.percent < 100;
      },
      uploadProcess () {
        // return this.filePercent;
        if(this.body.localExtra !== undefined){
          return this.body.localExtra.percent;
        }
        return 0;
      },
      getFileSuffix () {
        if(this.msg.hasOwnProperty('name')){
          return this.msg.name.substring(this.msg.name.indexOf(".")+1).toLocaleUpperCase();
        }
        else if(this.msg.body.hasOwnProperty('name')){
          return this.msg.body.name.substring(this.msg.body.name.indexOf(".")+1).toLocaleUpperCase();
        }
        else {
          return "?";
        }
      },
      getTag () {
        return this.type;
      },
      getTextAudioVideoData () {
        return {
          src: this.body.body || "",
          controls: true
        }
      },
    },
    methods: {
      handleClose (done) {
        this.imgSrc = undefined;
        this.videoSrc = undefined;
        this.audioSrc = undefined;
        done();
      },
      showDialog ({ tag }) {
        const { src } = this.getTextAudioVideoData;
        const callback = () => {
          if (tag === 'IMAGE') {
            this.imgSrc = src;
            this.show = true;
          } else if (tag === 'VIDEO') {
            this.videoSrc = src;
            this.show = true;
          } else if (tag === 'AUDIO') {
            this.audioSrc = src;
            this.show = true;
          } else if (tag === 'FILE') {
            if(!isElectronPlatform()){
              window.open(src);
            }
            else {
              let filename = src.substring(src.lastIndexOf('/')+1);
              if(!filename){
                filename = `${new Date().getTime()}.tmp`
              }
              downloadFile(src, filename);
            }
          }
        };
        if (typeof this.beforeOpen === 'function') {
          this.beforeOpen({ tag, src }, callback)
        } else {
          callback();
        }
      },
      parseText () {
        let { body } = this;
        if (!body) return;
        const text = body.body.replace(/\n/g,'<br/>');
        // console.log(`text body: ${text}`);
        let html = emojiParser(text).replace(/<img src/g, '<img data-class="iconBox" src');
        // console.log(`parse return: ${html}`);
        return html
      },


      sendBrowsingGood(){
        this.$emit('sendManualServiceItem', {type:'sendBrowsingGood'});
      },
      sendCurrentOrder(){
        this.$emit('sendManualServiceItem', {type:'sendCurrentOrder'});
      },

      requestManualService(){
        this.$emit('sendManualServiceItem', {type:'requestManualService'});
      },
      sendGood(){
        this.$emit('sendManualServiceItem', {type:'sendGood', data:this.body});
      },
      sendOrder(){
        this.$emit('sendManualServiceItem', {type:'sendOrder', data:this.body});
      },
      triggerUploadChange(type, data){
        if((this.type === 'FILE' || this.type === 'VIDEO') && (this.body.localExtra !== undefined)){
          if(type === 'UPLOADED'){
            if(this.body.localExtra.fileId === data.id){
              // console.log(`uploaded data: ${JSON.stringify(data)}`);
              this.body.localExtra.percent = data.uploadPercent;
              this.body.body = data.url;
            }
          }
          else if(type === 'UPLOADING'){
            if(this.body.localExtra.fileId === data.id){
              this.body.localExtra.percent = data.uploadPercent;
            }
          }
        }
      }
    },
    mounted() {

    }
  }
</script>
<style lange="scss" scoped>
  .wrapper {
    padding: 0px;
    margin: 0px;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    min-width: 180px;
    max-width: 480px;
  }


  .ec-item-div {
    background: #fff;
    color: #000;
    max-width: 210px;
    /*height: 144px;*/

    padding: 0.5rem;
    padding-right: 0;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 0.2rem 0;
  }


  .row-file {
    width: 60px;
    height: 100px;
    background-color: #909399;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .row-file-suffix {
    font-size: 2em;
  }

  .row-file-desc {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .row-item {
    display: flex;
    flex-direction: column;
  }

  .row-item-ordercode{
    display: flex;
    flex-direction: row;
    margin: 8px;
  }

  .row-item-good {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 8px;
  }

  .row-item-good img{
    width: 60px;
    height: 56px;
  }

  .row-item-good p{
    max-height: 60px;
    margin-left:4px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    padding-bottom: 4px;
  }


  .row-item-price {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 8px;
    min-height: 32px;
  }

  .row-item-price span{

  }

  .web__msg-submit {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
  }

  .process-container {
    background-color: #fff
  }

  .process-bar {
    height:2px;
    background-color: #409eff;
  }



</style>
